<template>
  <div class="index" id="index">
    <!-- 头部 -->
    <div class="index-wrap">
      <div class="index-head">
        <img :src="bannerImg" alt="" srcset="">
        <div class="ih-noticeW">
          <div class="ih-notice">
            <span class="ih-hormImg j1Png"></span>
            <span>椰子分公告：</span>
              <!-- <marquee  style="width: 65%;font-size:0.26rem;" loop="infinite">
                  <div style="display:flex;">
                    <a :href="item.url" class="link-url" v-for="(item,index) in newsList" :key="index.title" v-if="item.status == 0">
                       {{item.noticeTitle}}
                    </a>
                  </div>
              </marquee> -->
              <div id="marquee" style="width:65%;"></div>
          </div>
          <span class="ih-goImg j1Png"></span>
        </div>

      <div class="ih-balanceW">
        <div class="ih-balance" v-if="token">
          <p class="ih-money">{{loScore.score}}</p>
          <p class="ih-moneya">椰子分余额</p>
        </div>
        <div class="ih-balance" v-else>
          <router-link :to="{path:'/login'}" class="ih-nologin">登录</router-link>
        </div>
      </div>
    </div>

      <!-- 导航 -->
      <ul class="index-fastNav">
        <li class="ifa-fastNavLi" v-for="(item,index) in fastList" :key="index">
            <div :style="(item.path=='javascript:;'? 'color:#ccc':'color:#000')" @click="goLink(item)" style="position:relative;">
              <img src="/static/images/home/hot.png" alt=" " v-if="item.id == 1 || item.id == 0" class="badge-img hot">
              <img src="/static/images/home/new.png" alt=" " v-if="item.id == 13" class="badge-img">
              <img :src="item.id == 4 ? logoImg : `/static/images/home/${item.img}${!item.active ? '-disabled': ''}.png?${(new Date()).getTime()}`" alt="" class="iconImg">
              <p class="ifa-name" :style="!item.active && 'color: #cecece'">{{item.name}}</p>
            </div>
        </li>
      </ul>

      <!-- 图片 -->
      <div class="index-swipeW">
        <div class="index-swipe">
          <div class="swiper-container" style="height:2rem">
            <!-- 页面 -->
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) of banner" :key="index">
                <a :href="item.url">
                  <img :src="item.src" alt="">
                </a>
              </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分区间 -->
    <v-integral></v-integral>

    <!-- 弹窗 -->
    <banner v-model="showDialog" ref="banner" :data="data" @handle-close="handleClose()"></banner>
  </div>
</template>

<script>
import Integral from '../../components/home/integral.vue'
import Swiper from 'swiper';
import api from '../../service/api';
import { mapGetters, mapActions } from 'vuex';
import { getToken } from '@/util/common'
import mixin from '@/util/mixin'
export default {
  name: 'index',
  mixins: [mixin],
  components: {
    "v-integral": Integral,
    Banner: ()=>import('../shopMall/components/Banner'),
  },
  data() {
    return {
      fastList: [
        { id: 0, name: "特惠商品", img: 'discount', active: true, path: '/goodsList?classfyId=1000007' },
        { id: 1, name: "黄金兑换", img: 'gold', active: true, path: hostUrl + 'ticket/gold?t=' + (new Date()).getTime() },
        { id: 2, name: "话费充值", img: 'recharge', active: true, path: hostUrl + 'ticket/phone?t=' + (new Date()).getTime() },
        { id: 5, name: "加油卡充值", img: 'oil', active: true, path: hostUrl + 'ticket/oil' },
        { id: 4, name: "小椰超市", img: 'jd', active: true, path: '/layout/channel?id=yeyun'},
        // { id: 13, name: "生活缴费", img: 'life', active: true, path: `${hostUrl}ticket/life` },
        { id: 6, name: "会员卡券", img: 'vip', active: true, path: hostUrl + 'ticket/memberCard'},
        // { id: 7, name: "海南旅游", img: 'travel', active: true, path: `${hostUrl}ticket/static/ticket.html` },
        // { id: 8, name: "海南特产", img: 'food', active: true, path: `${hostUrl}ticket/static/food.html` },
        // { id: 9, name: "机票酒店", img: 'air', active: false, path: 'javascript:;' },
        // { id: 10, name: "积分公益", img: 'jfgy', active: false, path: 'javascript:;' },
        // { id: 11, name: "游戏周边", img: 'game', active: false, path: 'javascript:;' },
        // { id: 12, name: "尊贵特权", img: 'zgtq', active: false, path: 'javascript:;' },
      ],
      data: '',
      showDialog: false,
      loginFlag: false,
      token: getToken(),
      banner: [],
      newsList:[],
      bannerImg: LOGO_PACKAGE_URL + 'home-banner-bg.png',
      logoImg: LOGO_PACKAGE_URL + 'superMark.png'
    }
  },
  created() {
  },
  computed: {
    ...mapGetters({
      loScore: 'userinfo/getUserInfo',
      showBanner: 'home/getShowBanner',
      showTime: 'home/getShowTime'
    })
  },
  mounted() {
    this.getBanner()
    this.getNews()
    this.getBannerTitle()
  },
  methods: {
    ...mapActions({
      setShowBanner :'home/setShowBanner',
      setShowTime :'home/setShowTime'
    }),
    goLink(item) {
      if (item.id === 4 || item.id === 0) {
        return this.$router.push(item.path)
      }
      if (item.path === 'javascript:;'){
        return
      }
      if (!getToken()) {
        return this.confirmBack()
      }
      window.location.href = item.path
    },
    async getBanner() {
      let banner = await this.axios(testUrl + api.goodsGroups, {
        "id": "e47b8b14f892456b8bff408dddbc0e58"
      }, 'post')
      this.banner = banner.data.data;
      this.$nextTick(() => {
        var swiperBan = new Swiper('.index-swipe .swiper-container', {
          loop: this.banner.length >1?true:false,
          autoplay: this.banner.length >1?true:false,
          pagination: {
            el: '.swiper-pagination',
            bulletClass : 'my-bullet',
            bulletActiveClass: 'my-bullet-active'
          },
        })
      })
    },
    async getNews() {
      let newsList = await this.axios(infoURl + api.newsList, {
        "catId": 206,
        "startNum": 0,
        "num": 3
      }, 'post')
        .then((data) => {
          if (data.resultCode == 0) {
            this.newsList = data.data;
            let marqueeHtml = document.createElement('div');
            let html = `<marquee  style="font-size:0.26rem;margin-top: 0.2rem;"  scrollamount=6   loop="infinite" >`
            this.newsList.forEach(res => {
              if(res.status == 0){
                 html += `<a href=${!res.url?'javascript:void(0)':res.url} class="link-url" style="color:#fff;margin-right: 50px;">
                       ${res.noticeTitle}
                    </a>`
              }
            });
            html += `</marquee>`;
            marqueeHtml.innerHTML = html;
            document.getElementById("marquee").appendChild(marqueeHtml)
          } else {
            this.Toast(data.message);
          }
        })
    },
    async getBannerTitle() {
      try {
        const { data, error_code, message } = await this.axios(testUrl + api.goodsGroups, {id: "f25ba33641e949549266eefefb37f2c0"}, 'post')
        this.data = data
        let expireTime = Date.parse(new Date((data.title).trim().replace(/-/g, '/')))
        let time = expireTime - Date.parse(new Date())
        if (expireTime !== this.showTime && time > 0) {
          this.setShowTime(expireTime)
          this.setShowBanner(true)
        }
        this.showDialog = (time > 0 && this.showBanner)
      } catch(e) {
        this.Toast(e)
      }
    },
    handleClose () {
      this.setShowBanner(!this.showBanner)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/mixin.scss';
#index{
  background: #fff;
  .index-wrap{
    border-bottom: 0.4rem solid #eef1f6;
  }
  .link-url{
    color:rgb(255,255,255);
    margin-right:100px;
    &:last-of-type{
      margin-right: 0;
    }
  }
  .index-head {
    position: relative;
    overflow: hidden;
    .ih-noticeW {
      width: 88%;
      background: rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 0.6rem;
      margin: px2rem(30) auto 0;
      line-height: 0.6rem;
      position: absolute;
      top: 0;
      left: 6%;
      .ih-notice {
        color: #fff;
        font-size: 0.26rem;
         width: 100%;
        display: flex;
        align-items: center;
        .ih-hormImg {
          width: 0.24rem;
          height: 0.24rem;
          background-position: -4.31rem -1.64rem;
          margin-left: 0.1rem;
          margin-right: 0.1rem;
          display: inline-block;
        }
        p {
          font-size: 0.26rem;
          color: #ffffff;
        }
      }
      .ih-goImg {
        width: 0.24rem;
        height: 0.24rem;
        background-position: -5.6rem -0.8rem;
        margin-right: 0.13rem;
      }
    }
    .ih-balanceW {
      display: flex;
      width: 80%;
      margin-left: 1.4rem;
      justify-content: space-between;
      margin-top: 0.45rem;
      position: absolute;
      top: px2rem(60);
      .ih-balance {
        p {
          // margin-top: -0.1rem;
          color: #fff;

          text-align: center;
        }
        .ih-money {
          font-size: px2rem(24);
          font-weight: bold;
          margin-top: -0.1rem;
        }
        .ih-moneya {
          font-size: px2rem(12);
          font-weight: bold;
          margin-top: -0.05rem;
          text-align: left;
        }

        .ih-nologin {
          margin: 0.1rem;
          color: #fff;
          display: block;
          letter-spacing: 1px;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }

  .index-fastNav {
    font-size: 0.24rem;
    color: #000;
    margin: 0 px2rem(10) 0.2rem px2rem(10);
    background: #fff;
    border-radius:25px 25px 0px 0px;
    padding-top: px2rem(6);
    margin-top: px2rem(-120);
    position: relative;
    .ifa-fastNavLi {
      width: 25%;
      text-align: center;
      margin: px2rem(14) 0 0.1rem 0;
      display: inline-block;
      .iconImg{
        width: px2rem(44);
        height: px2rem(44);
        margin: auto;
      }
      .badge-img{
        position: absolute;
        right: px2rem(16);
        top: px2rem(6);
        width: px2rem(21);
        height: px2rem(10);
      }
      .hot{
        top: px2rem(2);
      }

      .ifa-ImgW {
        width: 0.5rem;
        height: 0.5rem;
        background-position: -0.09rem -0.09rem;
        position: relative;
      }
      .ifa-name {
        padding: px2rem(9) 0 0 0;
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color:rgba(51,51,51,1);
      }
    }
  }

  .index-swipeW {
    margin: px2rem(10) px2rem(10) 0 px2rem(10);
    padding-bottom: px2rem(25);
    .swiper-container{
      border-radius:10px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
